<template>
  <div >
    <ComponentCard title="今日交易用户数" :value="numberFormat(orderUser)">
      <div ref="barChartRef" style="width:100%;height:100%;"></div>
      <template #footer>
        <span>退货率 &nbsp;{{returnRate}}%</span>
      </template>
    </ComponentCard>
  </div>
</template>

<script lang="ts">
export default {
  name: "Cumulative"
};
</script>
<script lang="ts" setup>
import ComponentCard from "./ComponentCard.vue";
import { computed, onMounted, ref,watch } from "vue";
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import {useReportStore} from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const {numberFormat} = useFormat()
const  reportDataStore = useReportStore()
const Rate =ref()
// 定义一个ref 关联到页面中的ref标签上面
const barChartRef = ref()
let barChart: EChartsType
const getOption =()=>{
  return{
    xAxis:{
      // data:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    data:orderUserTrendAxis.value
    },
    yAxis:{
      show:false, //y轴和标线不显示
    },
    series:{  //系列，设置图标类型，数据
      name:'实时交易量',
      type:'bar',
      data:orderUserTrend.value
    },
    grid:{   //图表在坐标中的显示位置
      left:0,
      right:0
    },
    tooltip:{ //显示提示
      trigger:'axis',
      confine:true
    }
  }
}
// 1.页面挂载完成后开始加载
onMounted(()=>{
  barChart = echarts.init(barChartRef.value)  //初始化echarts实例
  // barChart.setOption(getOption())   //绘制图表
  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener('resize', () => {
    barChart && barChart.resize()
  })

})
// 2.计算属性处理数据
const orderUser = computed(()=> reportDataStore.reportData.orderUser)
const returnRate = computed(()=>reportDataStore.reportData.returnRate)
const orderUserTrend = computed(()=>reportDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(()=>reportDataStore.reportData.orderUserTrendAxis)
// 3.监听，不然图表显示有问题
watch(orderUser,()=>{
  barChart.setOption(getOption())   //绘制图表
})
</script>
<style scoped>

</style>